CSS Grid'i radade suurused: täiustatud paigutuse kontrolli valdamine globaalsete veebikogemuste loomiseks

Pidevalt arenevas ja laienevas veebiarenduse maastikus on robustsete, paindlike ja reageerivate paigutuste loomine esmatähtis. CSS Grid Layout on kujunenud asendamatuks tööriistaks, pakkudes enneolematut kontrolli sisu kahemõõtmelise paigutuse üle. Kuigi Grid'i põhikontseptsioonid on suhteliselt lihtsad, peitub tõeline meisterlikkus CSS Grid'i radade suuruse määramise mõistmises ja tõhusas kasutamises. See põhjalik juhend sukeldub sügavale radade suuruste defineerimise nüanssidesse, võimaldades teil luua keerukaid ja kohanduvaid disainilahendusi, mis toimivad laitmatult erinevates seadmetes ja globaalsele publikule.

Raja suuruse määramine (track sizing) on lihtsustatult öeldes see, kuidas te määrate oma CSS Grid'i konteineris veergude laiuse ja ridade kõrguse. See on mehhanism, mille kaudu te ütlete brauserile, kui palju ruumi iga paigutuse segment peaks hõivama. Ilma nende mehhanismide täpse mõistmiseta võivad teie gridid tunduda jäigad, mitte kohaneda muutuva sisupikkusega või minna katki erinevatel ekraanisuurustel. Globaalse veebikogemuse jaoks, kus sisu võidakse tõlkida keeltesse, millel on väga erinevad sõnapikkused või kuvamistavad, muutub dünaamiline ja sisuteadlik radade suuruse määramine mitte ainult eeliseks, vaid lausa vajaduseks.

Alused: selgesõnaline Grid'i radade suuruse määramine

Selgesõnaline grid'i radade suuruse määramine hõlmab veergude ja ridade mõõtmete defineerimist vastavalt grid-template-columns ja grid-template-rows omadustega. Need omadused aktsepteerivad radade suuruste loendit, millest igaüks vastab ühele veerule või reale teie grid'is.

Fikseeritud ja suhtelised pikkusühikud

Kõige otsekohesem viis radade suuruse määramiseks on kasutada standardseid CSS-i pikkusühikuid. Need pakuvad ettearvatavaid, absoluutseid või vaateaknaga seotud mõõtmeid.

• Absoluutsed ühikud (px, in, cm, mm, pt, pc): Pikslid (px) on kaugelt kõige levinumad. Need pakuvad täpset, muutumatut suurust, mis võib olla kasulik fikseeritud laiusega elementide, nagu ikoonid või spetsiifilised vahed, puhul. Siiski muudab nende jäikus nad vähem ideaalseks väga reageerivate paigutuste jaoks, mis peavad kohanema erinevate ekraanisuurustega. Kuigi px on globaalselt mõistetav, võib ainult sellele tuginemine viia paigutusteni, mis ei skaleeru hästi kasutajate jaoks, kellel on erinevad kuvasätted või ligipääsetavusvajadused.

              .grid-container {
    display: grid;
    grid-template-columns: 100px 250px 150px; /* Kolm fikseeritud pikslilaiusega veergu */
    grid-template-rows: 50px auto;
  }
              
  
                
                  Copy
                
              
            

• Suhtelised ühikud (em, rem, vw, vh, %): Need ühikud pakuvad suuremat paindlikkust. Nad tuletavad oma väärtused teistest omadustest või vaateaknast, muutes need olemuselt reageerivamaks ja ligipääsetavamaks globaalsele publikule.

  • em: Suhteline elemendi enda fondi suurusega (või selle lähima vanema omaga, kui see pole selgesõnaliselt määratud). Suurepärane komponenditasemel skaleerimise loomiseks, tagades, et vahed ja suurused komponendi sees jäävad proportsionaalseks selle teksti suurusega.

                .grid-item {
      font-size: 16px;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: 8em 15em 8em; /* Veerud on suhtelised konteineri fondi suurusega */
    }
                
    
                  
                    Copy
                  
                
              

  • rem: Suhteline juur-elemendi html fondi suurusega. Seda eelistatakse sageli lehe üldiseks skaleerimiseks, kuna juurfondi suuruse muutmine (nt ligipääsetavuse jaoks) skaleerib kogu paigutuse proportsionaalselt. See on eriti kasulik globaalsetele kasutajatele, kes võivad kohandada oma brauseri vaikimisi fondi suurust.

                html {
      font-size: 100%; /* Või 16px */
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: 6rem 12rem 6rem; /* Veerud on suhtelised juurelemendi fondi suurusega */
    }
                
    
                  
                    Copy
                  
                
              

  • vw (vaateakna laius) ja vh (vaateakna kõrgus): Suhteline vaateakna laiuse või kõrgusega. 1vw on 1% vaateakna laiusest. Need on suurepärased tõeliselt voolavate disainide jaoks, mis skaleeruvad otse brauseriaknaga, ideaalsed suurte hero-sektsioonide või elementide jaoks, mis peaksid alati hõivama teatud protsendi ekraanipinnast, olenemata seadmest. See tagab ühtlase visuaalse proportsiooni kõigil ekraaniresolutsioonidel globaalselt.

                .grid-container {
      display: grid;
      grid-template-columns: 10vw 80vw 10vw; /* Külgribad kumbki 10%, põhiosa 80% vaateakna laiusest */
    }
                
    
                  
                    Copy
                  
                
              

  • % (protsent): Suhteline grid-konteineri suurusega. Kui teie grid-konteineril on määratletud laius, siis protsentide kasutamine veeruradade jaoks paneb need hõivama teatud protsendi sellest konteineri laiusest. See on hea ruumi jaotamiseks fikseeritud või proportsionaalselt suurusega vanema sees. Siiski tuleb meeles pidada, et protsendid ei arvesta grid-vahedega (gap), mis võib mõnikord põhjustada ootamatuid ülevoolusid, kui seda hoolikalt ei hallata.

                .grid-container {
      display: grid;
      grid-template-columns: 25% 50% 25%; /* Veerud hõivavad 25%, 50%, 25% konteineri laiusest */
    }
                
    
                  
                    Copy
                  
                
              

Murdosa ühik (fr)

Kuigi fikseeritud ja protsentuaalsed ühikud pakuvad ettearvatavat suurust, tutvustab murdosa ühik (fr) võimsa kontseptsiooni olemasoleva ruumi proportsionaalsest jaotamisest grid'i radade vahel. See ühik on eriti väärtuslik voolavate, reageerivate paigutuste loomisel, kus sisu peab dünaamiliselt kohanema vaateaknaga.

Kui defineerite raja fr-ühikuga, ütleb see brauserile, et see eraldaks murdosa allesjäänud vabast ruumist grid-konteineris. Näiteks kui teil on kolm veergu defineeritud kui 1fr 2fr 1fr, võtab keskmine veerg kaks korda rohkem allesjäänud ruumi kui esimene või kolmas veerg. "Allesjäänud ruum" on see, mis jääb üle pärast seda, kui kõik fikseeritud suurusega rajad (nagu pikslid, em-id või sisupõhised rajad) on oma osa võtnud ja pärast gap väärtuste arvessevõtmist.

Kujutage ette stsenaariumi, kus soovite, et põhisisu ala võtaks enamiku ruumist, mida ääristavad väiksemad, võrdse suurusega külgribad. fr-ühik lihtsustab seda tohutult:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Külgriba | Põhisisu | Külgriba */
  gap: 20px; /* Vahe radade vahel */
}

/* Näitlik HTML-struktuur konteksti jaoks */
<div class="grid-container">
  <div class="sidebar-left">Navigatsioon</div>
  <div class="main-content">Artikli sisu läheb siia.</div>
  <div class="sidebar-right">Reklaamid</div>
</div>
            

              
                Copy
              
            
          

Selles näites hõivab 3fr veerg kolm korda rohkem laiust kui 1fr veerud, arvestades mis tahes gap väärtusi. See tagab, et teie põhisisu ala skaleerub dünaamiliselt brauseriaknaga, säilitades oma proportsionaalse domineerimise. See kohanemisvõime teeb fr-ühikust kaasaegse, reageeriva veebidisaini nurgakivi, võimaldades paigutustel sujuvalt kohaneda hulga erinevate ekraanisuurustega, alates mobiiltelefonidest kuni ülilaia töölauaekraanideni, tagades ühtlase kasutajakogemuse olenemata seadmest.

Võtmesõna auto: sisuteadlik paindlikkus

Võtmesõna auto pakub võimsat segu paindlikkusest ja sisuteadlikkusest CSS Grid'is. Kui seda kasutatakse raja suurusena, käitub auto mõnevõrra sarnaselt fr-ühikuga, kuna see võtab vaba ruumi, kuid olulise erinevusega: see seab esikohale sisu suuruse oma rajal.

auto rada kasvab, et mahutada oma sisu (kuni grid-konteineri suuruseni), ja kahaneb seejärel oma minimaalse sisu suuruseni, kui ruumi napib. Kui pärast kõigi teiste radade (fikseeritud, fr jne) paigutamist on veel ruumi üle, jaotavad kõik auto rajad selle allesjäänud ruumi endi vahel ühtlaselt. See muudab auto eriti kasulikuks paigutustes, kus teatud sisu peab ise oma laiuse või kõrguse määrama.

Kujutage ette paigutust fikseeritud külgribaga ja põhisisu alaga, mis peaks alati oma sisule sobima, kuid ka laienema, et täita ülejäänud ruum:

            .grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr; /* Fikseeritud külgriba | Sisuteadlik | Voolav ülejääk */
  gap: 10px;
}

/* Näitlik HTML konteksti jaoks */
<div class="grid-container">
  <div class="sidebar">Fikseeritud laiusega nav</div>
  <div class="main-content">See sisu määrab selle veeru laiuse, kuid ka laieneb.</div>
  <div class="info-panel">Paindlik info</div>
</div>
            

              
                Copy
              
            
          

Selles seadistuses on esimene veerg fikseeritud 200px. Teine veerg, kasutades auto, püüab esmalt olla nii lai, kui selle sisu nõuab (ilma ülevooluta). Seejärel võtab kolmas veerg, 1fr, kogu ülejäänud vaba ruumi. Kui pärast 1fr veeru osa võtmist on veel ruumi, laieneb auto veerg, et täita osa sellest allesjäänud ruumist proportsionaalselt. See intelligentne käitumine võimaldab luua väga dünaamilisi paigutusi, kus teie grid'i osad saavad hingata koos oma sisuga, mis on hindamatu erinevate keelte ja muutuva sisupikkuse toetamisel globaalses rakenduses.

Sisemised suuruse võtmesõnad: min-content, max-content, fit-content()

Need võtmesõnad võimaldavad grid'i radade suuruse määrata puhtalt nende sisu sisemise suuruse põhjal. Need pakuvad võimsat viisi luua paigutusi, mis on väga kohanduvad tekstile ja elementidele, mida nad sisaldavad, mis on oluline eelis globaalse sisuga tegelemisel, kus teksti pikkused ja tähemärkide laiused võivad dramaatiliselt erineda.

• min-content: Rada, mille suurus on määratud min-content-iga, muutub nii väikeseks kui võimalik ilma oma sisu ülevooluta. Teksti puhul tähendab see pikima sõna või murdmatu stringi laiust. Piltide puhul on see nende sisemine minimaalne laius. See on kasulik, kui soovite, et veerg ümbritseks tihedalt oma sisu, vältides ebavajalikku tühja ruumi, eriti mitmeveerulistes paigutustes, kus ruum on hinnas.

              .grid-container {
    display: grid;
    grid-template-columns: min-content 1fr min-content; /* Veerud kahanevad, et sobituda sisuga */
    gap: 15px;
  }
  
  <div class="grid-container">
    <div>Lühike silt</div>
    <div>See on väga pikk sisu, mis vajab piisavalt ruumi, et laieneda ja olla loetav erinevates keeltes ja kirjasüsteemides.</div>
    <div>Info</div>
  </div>
              
  
                
                  Copy
                
              
            

  Selles näites on esimene ja kolmas veerg ainult nii laiad kui nende pikim sõna, mis sobib ideaalselt siltide või lühikeste olekuindikaatorite jaoks, mis ei tohiks võtta rohkem ruumi kui vajalik, olenemata keelest.

• max-content: Rada, mille suurus on määratud max-content-iga, muutub nii laiaks, kui selle sisu soovib, ilma reamurdmisteta või ülevooluta, isegi kui see tähendab grid-konteineri ületamist. Teksti puhul tähendab see kogu stringi laiust, kui see oleks ühel real. See on kasulik elementide jaoks, mis peavad alati kuvama oma täieliku sisu ilma kärpimata, näiteks navigeerimisüksus, mis ei tohiks kunagi oma teksti murda.

              .grid-container {
    display: grid;
    grid-template-columns: max-content max-content 1fr; /* Veerud laienevad, et sisu täielikult mahutada */
    gap: 10px;
  }
  
  <div class="grid-container">
    <div>Täielik tootenime kuvamine</div>
    <div>Lokaliseeritud tarneteave</div>
    <div>Ülejäänud detailid</div>
  </div>
              
  
                
                  Copy
                
              
            

  Siin venivad esimesed kaks veergu, et tagada, et nende sisu ei murduks kunagi, mis võib olla kriitilise tähtsusega olulise, kärpimata teabe, nagu tootenimed või väga spetsiifiline lokaliseeritud tekst, kuvamisel.

• fit-content(): See on ehk kõige mitmekülgsem sisemise suuruse võtmesõna, ühendades endas auto, min-content ja määratud maksimumi parimad aspektid. Rada, mis kasutab fit-content(X), käitub nagu auto, kuid ei kasva suuremaks kui X (pikkuse või protsendi väärtus) või selle max-content suurus, kumb iganes on väiksem. Samas ei kahane see kunagi alla oma min-content suuruse. See on sisuliselt minmax(min-content, max(auto, X)).

  See on äärmiselt võimas veergude loomiseks, mis on sisupõhised, kuid ka piiratud, et vältida liigset kasvu, või tagada, et nad täidavad vaba ruumi kuni teatud punktini. Kujutage ette kasutajakommentaaride sektsiooni, kus kommentaarid peaksid laienema, et sobituda nende tekstiga, kuid ei tohiks enne reamurdmist ületada teatud laiust.

              .grid-container {
    display: grid;
    grid-template-columns: fit-content(300px) 1fr;
    gap: 20px;
  }
  
  <div class="grid-container">
    <div>Lühike märkus.</div>
    <div>See on palju pikem tekstilõik, mis peab reamurdmist tegema ja olema loetav. See laieneb kuni 300 pikslini, enne kui murrab rida, tagades, et isegi väga pikad tõlgitud laused säilitavad hea loetavuse ega lükka paigutust liigselt paigast.</div>
  </div>
              
  
                
                  Copy
                
              
            

  Esimene veerg on vähemalt oma min-content suurune ja kasvab koos sisuga kuni 300px, pärast mida hakkab see reamurdmist tegema. Kui vaba ruumi on rohkem, käitub see nagu auto ja võtab oma osa. See dünaamiline kohanemisvõime on hindamatu väärtusega mitut keelt toetavate kasutajaliideste jaoks, kus sisu pikkus võib olla väga ettearvamatu.

minmax() võimsus

Kuigi üksikud raja suuruse ühikud on võimsad, vallandub nende tõeline jõud siis, kui neid kombineerida minmax() funktsioonis. Funktsioon minmax(min, max) defineerib grid'i raja suuruse vahemiku: rada ei ole väiksem kui min ja mitte suurem kui max. Nii min kui ka max võivad olla mis tahes kehtiv raja suurus (pikkus, protsent, fr, auto, min-content, max-content, fit-content()), muutes minmax() uskumatult mitmekülgseks robustsete, reageerivate paigutuste loomisel.

minmax() pakutav paindlikkus on ülioluline paigutuste ehitamisel, mis kohanevad sujuvalt erinevate ekraanisuuruste ja sisuga, mis on globaalsete rakenduste jaoks vältimatu nõue. See võimaldab teil kehtestada miinimumpiiranguid, et vältida sisu muutumist loetamatult väikeseks, samal ajal võimaldades kasvu, et olemasolevat ruumi tõhusalt ära kasutada.

Levinud mustrid minmax()-ga:

• minmax(auto, 1fr): See on väga paindlik raja suurus. Rada on vähemalt sama suur kui selle sisu (auto) ja kasvab, et tarbida vaba murdosa ruumi, kui seda on rohkem saadaval (1fr). See on ideaalne põhisisu alade jaoks, mis peaksid austama oma sisu loomulikku suurust, kuid ka venima, et täita ülejäänud ruum.

              .grid-container {
    display: grid;
    grid-template-columns: 200px minmax(auto, 1fr);
    /* Fikseeritud külgriba, põhisisu täidab ülejäänud ruumi, kuid arvestab oma minimaalse sisu suurusega */
  }
              
  
                
                  Copy
                
              
            

• minmax(200px, 1fr): Siin on rada alati vähemalt 200px lai, kuid kui vaba ruumi on rohkem, kasvab see proportsionaalselt, et täita see 1fr-ina. See on suurepärane pildigaleriide või tootekataloogide jaoks, kus soovite elementidele minimaalset nähtavat suurust, kuid soovite ka, et need suurematel ekraanidel üles skaleeruksid.

              .grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    /* Kolm veergu, igaüks vähemalt 200px, kuid kasvavad proportsionaalselt */
  }
              
  
                
                  Copy
                
              
            

• minmax(min-content, max-content): See konfiguratsioon paneb raja suuruse määrama end puhtalt oma sisu põhjal, mitte kunagi kahanedes alla oma väikseima võimaliku suuruse ja mitte kunagi laienedes üle oma ideaalse suuruse (mahutades kogu sisu ühele reale). See on mõnikord kasulik väga spetsiifiliste, sisupõhiste komponentide jaoks, kus dünaamiline reamurdmine või ruumi täitmine ei ole soovitav.

Tõhus radade kordamine repeat()-ga

Radade suuruste käsitsi loetlemine võib muutuda tülikaks grid'ide puhul, kus on palju identseid veerge või ridu. Funktsioon repeat() lihtsustab seda, võimaldades teil defineerida radade mustri, mis kordub määratud arv kordi või dünaamiliselt vastavalt olemasolevale ruumile.

Süntaks on repeat(count, track-list). count võib olla positiivne täisarv või võtmesõnad nagu auto-fill või auto-fit. track-list on üks või mitu raja suurust.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Neli võrdset veergu */
  grid-template-rows: repeat(2, 100px); /* Kaks 100px rida */
}
            

              
                Copy
              
            
          

See on puhas ja lühike, eriti ühtlaste grid'ide, nagu fotogaleriid või kaardipaigutused, loomiseks.

Dünaamiline kordamine: auto-fit ja auto-fill

repeat() tõeline jõud reageeriva disaini jaoks, eriti globaalses kontekstis, kus sisu ja ekraanisuurused varieeruvad, tuleb esile auto-fit ja auto-fill võtmesõnadega. Kui neid kombineerida minmax()-ga, loovad need voolavaid, isekohanduvaid grid'e, mis on väga vastupidavad vaateakna suuruse või sisu muutustele. Seda mustrit nimetatakse sageli "iseparanevaks" grid'iks.

Selle dünaamilise käitumise süntaks on tavaliselt grid-template-columns: repeat(auto-fit/auto-fill, minmax(, 1fr));

• auto-fill: See võtmesõna käsib brauseril luua nii palju radu kui võimalik, et täita olemasolev ruum, isegi kui pole piisavalt grid-elemente kõigi nende radade täitmiseks. Kui luuakse tühje radu, võtavad need siiski ruumi. See on kasulik, kui soovite tagada ühtlase vahe või vältida ühe elemendi liiga laia venimist reas, isegi kui see on ainus. Kujutage ette paigutust, kus soovite alati jätta ruumi potentsiaalsetele uutele elementidele või reklaamidele, isegi kui neid hetkel pole.

              .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
  
  /* auto-fill'i puhul, kui ruumi on 4 veeru jaoks, aga elemente on 3, jääb 4. veeru pesa nähtavale (tühjaks). */
              
  
                
                  Copy
                
              
            

• auto-fit: See võtmesõna käitub identselt auto-fill-iga, kuni kõik olemasolevad elemendid on paigutatud. Kui kõik elemendid on paigutatud, siis kõik tühjad rajad, mis auto-fill-iga loodi, surutakse kokku 0 laiuseks. Ülejäänud rajad laienevad seejärel, et täita olemasolev ruum. See on tavaliselt eelistatud reageerivate elementide grid'ide jaoks, kus soovite, et elemendid veniksid ja täidaksid kogu vaba ruumi, kui elemente on vähem kui potentsiaalseid radu. See tagab, et teie elemendid on alati nii suured kui võimalik ilma ülevooluta, pakkudes puhtamat välimust.

              .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  
  /* auto-fit'i puhul, kui ruumi on 4 veeru jaoks, aga elemente on 3, laienevad 3 elementi täitma kogu laiuse, kokku surudes 4. potentsiaalse pesa. */
              
  
                
                  Copy
                
              
            

Valik auto-fill ja auto-fit vahel sõltub suuresti sellest, kas eelistate, et tühjad kohad oleksid nähtavad (auto-fill) või et olemasolev sisu laieneks nende tühimike täitmiseks (auto-fit). Enamiku reageerivate grid'ide puhul pakub auto-fit esteetiliselt meeldivamat ja tõhusamat ruumikasutust, eriti kui elementide arv võib kõikuda. See dünaamiline kohanemine on ülioluline veebirakenduste jaoks, mis teenindavad globaalset publikut, kus sisu tihedus ja elementide arv võivad kasutaja eelistuste või taustasüsteemi andmete põhjal laialdaselt erineda.

Selgesõnalisest kaugemale: kaudne Grid'i radade suuruse määramine

Kuigi te defineerite enamiku oma grid'i struktuurist, kasutades selgesõnalisi radu omadustega grid-template-columns ja grid-template-rows, on CSS Grid'il ka mehhanism kaudsete radade loomiseks. Need rajad genereeritakse automaatselt, kui paigutate grid-elemendi väljapoole oma selgesõnaliselt defineeritud grid'i piire või kui grid-konteineris on rohkem elemente, kui selle selgesõnalised raja definitsioonid mahutavad.

Näiteks kui defineerite selgesõnaliselt ainult kaks veergu, kuid paigutate seejärel kolmanda elemendi kolmandasse veergu, kasutades grid-column: 3;, luuakse selle elemendi mahutamiseks kaudne kolmas veerg. Samamoodi, kui teil on rohkem grid-elemente kui selgesõnalisi rea definitsioone, lisatakse nende mahutamiseks kaudseid ridu.

grid-auto-columns ja grid-auto-rows

Vaikimisi on kaudsete radade suuruseks auto. Siiski saate kontrollida nende automaatselt genereeritud radade suurust, kasutades grid-auto-columns ja grid-auto-rows. Need omadused aktsepteerivad ühte raja suuruse väärtust või väärtuste loendit (mis kordub järgnevate kaudsete radade puhul).

See on uskumatult kasulik dünaamilise sisu puhul, kus te ei pruugi ette teada ridade või veergude täpset arvu. Kujutage ette armatuurlauda, kuhu kasutajad lisavad vidinaid, luues vajadusel uusi ridu:

            .dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Määratle selgesõnaliselt 3 veergu */
  grid-auto-rows: minmax(150px, auto); /* Kaudsed read on vähemalt 150px, kuid kasvavad koos sisuga */
  gap: 20px;
}

/* Kui 3-veerulises grid'is on 5 elementi, loob Grid 2 selgesõnalist rida ja 1 kaudse rea. */
/* Kaudse rea suuruse määrab grid-auto-rows. */
            

              
                Copy
              
            
          

Siin järgiksid kõik read, mis on loodud elementide paigutamisest kaugemale (või kui te defineeriksite selgesõnalisi ridu), minmax(150px, auto) suuruse reeglit. See tagab dünaamilistele sisuplokkidele minimaalse kõrguse, võimaldades neil samal ajal laieneda, et sobituda muutuva sisupikkusega, mis on ülioluline rahvusvahelise sisu või kasutajate loodud andmete puhul, kus ranged mõõtmed on sageli ebapraktilised.

grid-auto-flow

Kuigi see ei ole otsene raja suuruse omadus, mõjutab grid-auto-flow oluliselt seda, kuidas kaudseid radu genereeritakse, kontrollides automaatse paigutuse algoritmi. See dikteerib, kuidas grid-elemendid automaatselt grid'i paigutatakse, mis omakorda määrab, millal ja kus kaudsed rajad luuakse.

• row (vaikimisi): Elemendid paigutatakse ridade kaupa, lisades vajadusel uusi ridu. See on kõige levinum käitumine, mis viib kaudsete ridade tekkimiseni.

• column: Elemendid paigutatakse veergude kaupa, lisades vajadusel uusi veerge. See viib kaudsete veergude tekkimiseni, mille suurust kontrolliks siis grid-auto-columns.

• dense: Püüab täita tühimikke grid'i varasemates osades. See võib viia vähem ettearvatava visuaalse järjekorrani, kuid kompaktsema paigutuseni, mõjutades potentsiaalselt seda, millised rajad muutuvad kaudseks.

Näiteks kui seate grid-auto-flow: column; ja teil on rohkem elemente kui teie selgesõnalistes veeru definitsioonides, muutuks grid-auto-columns nende uute, kaudsete veergude suuruse määramisel väga oluliseks.

Täiustatud tehnikad ja reaalse maailma stsenaariumid

Nüüd, kui oleme käsitlenud põhilisi ja dünaamilisi radade suuruse määramise mehhanisme, uurime, kuidas need kombineeruvad, et ehitada keerukaid, reaalses maailmas toimivaid paigutusi, mis on reageerivad, ligipääsetavad ja jõudsad globaalsele publikule.

Reageerivad paigutused repeat() ja minmax() abil

Kombinatsioon repeat()-ist koos auto-fit/auto-fill ja minmax(, 1fr)-ga on vaieldamatult kõige võimsam muster tõeliselt reageerivate grid'ide loomiseks. See tehnika võimaldab teil defineerida grid'i, kus elemendid murduvad automaatselt uutele ridadele, kui vaateaken kahaneb, ja laienevad, et täita vaba ruumi, kui see kasvab, ilma et oleks vaja selgesõnalisi meediapäringuid veergude muutmiseks.

Kujutage ette e-kaubanduse platvormi toodete kuvamise lehte. Tooted peaksid suurtel ekraanidel kuvama mitmes veerus, kuid väiksematel seadmetel kenasti virnastuma. Tootekaardi minimaalne laius võiks olla 250px, kuid see peaks painduma, et täita vaba ruumi:

            .product-listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 20px;
}

/* Kujutage ette mitut <div class="product-card"> elementi sees. */
/* Laial ekraanil võite näha 4 või 5 veergu. */
/* Ekraani kitsendades väheneb see sujuvalt 3, seejärel 2, siis 1 veeruni, */
/* kusjuures iga kaart laieneb, et täita veeru laius. */
            

              
                Copy
              
            
          

See üksainus CSS-deklaratsioon haldab keerulist reageerivust vaevata. Globaalse e-kaubanduse jaoks, kus tootenimed või kirjeldused võivad erinevates keeltes olla palju pikemad või lühemad, tagab see muster, et tootekardid näevad alati head välja, säilitades oma minimaalse loetavuse suuruse, kohanedes samal ajal erineva sisu kuvamisega ilma paigutust lõhkumata. See on kohanduva disaini nurgakivi.

Keerulised kasutajaliidese struktuurid: päis, külgriba, põhisisu, jalus

Lehe üldise paigutuse defineerimiseks pakub grid'i radade suuruse määramise kombineerimine grid-template-areas-iga semantilist ja väga loetavat lähenemist. grid-template-areas võimaldab teil oma paigutuse osadele nimesid anda, muutes struktuuri uskumatult selgeks. Seejärel defineerite nendele aladele vastavate ridade ja veergude suurused.

Kujutage ette tavalist veebilehe struktuuri: päis, mis ulatub üle ülaosa, põhisisu ala, mida ääristab külgriba, ja jalus allosas. See paigutus vajab täpset kontrolli veergude ja ridade kõrguste üle.

            .page-layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* Fikseeritud külgriba, voolav põhisisu */
  grid-template-rows: auto 1fr auto; /* Päise kõrgus sisu järgi, põhisisu täidab ruumi, jaluse kõrgus sisu järgi */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh; /* Tagab, et paigutus hõivab kogu vaateakna kõrguse */
}

.header { grid-area: header; background-color: #f8f8f8; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #e6e6e6; padding: 20px; }
.main-content { grid-area: main; background-color: #f0f0f0; padding: 30px; }
.footer { grid-area: footer; background-color: #f8f8f8; padding: 15px; }

/* Näitlik HTML-struktuur */
<div class="page-layout">
  <header class="header">Saidi päis</header>
  <aside class="sidebar">Põhinavigatsioon</aside>
  <main class="main-content"><h1>Tere tulemast meie globaalsele platvormile!</h1><p>See on põhisisu ala.</p></main>
  <footer class="footer">Autoriõigus 2024 ©</footer>
</div>
            

              
                Copy
              
            
          

Selles seadistuses:

• grid-template-columns: 250px 1fr; loob fikseeritud laiusega külgriba ja põhisisu ala, mis võtab kogu ülejäänud horisontaalse ruumi.
• grid-template-rows: auto 1fr auto; tagab, et päise ja jaluse kõrgus määratakse nende sisu järgi, samal ajal kui põhisisu rida laieneb, et täita olemasolev vertikaalne ruum, lükates jaluse vaateakna allossa.

See lähenemine pakub robustset raamistikku, mis kohandub hästi muutuva sisu kõrgusega (nt päis pika tõlgitud saidi pealkirjaga) ja tagab ekraanipinna optimaalse kasutuse, mis on oluline ühtlase kasutajakogemuse tagamiseks erinevates kultuurides ja seadmetüüpides.

Dünaamilise sisu ja rahvusvahelistamise käsitlemine

Üks veenvamaid eeliseid täiustatud Grid'i radade suuruse määramisel globaalsele publikule on selle omane kohanemisvõime dünaamilise ja rahvusvahelise sisuga. Teksti pikkused, tähemärgistikud (nt CJK-tähemärgid vs. ladina tähemärgid) ja isegi lugemissuunad (vasakult paremale vs. paremalt vasakule) võivad drastiliselt muuta sisu jaoks vajalikku visuaalset ruumi.

• min-content, max-content, auto ja fit-content(): Need sisemise suuruse võtmesõnad on hindamatud. Näiteks keelevalikuga navigeerimisriba võib kasutada min-content iga keelevaliku jaoks, et tagada, et nupp on ainult nii lai kui praeguse keele tekst, olenemata sellest, kas see on "English," "Deutsch," või "日本語." See väldib ebavajalikku tühja ruumi ja hoiab kasutajaliidese kompaktsena. Kui veerg sisaldab kasutajate loodud sisu, tagab minmax(min-content, 1fr), et see on loetav, kuid ka reageeriv, vältides ülevoolu probleeme.

              .language-switcher {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content; /* Iga keele nupp on sama lai kui selle tekst */
    gap: 10px;
  }
              
  
                
                  Copy
                
              
            

• fr-ühik: Selle proportsionaalne olemus muudab selle suurepäraseks valikuks ruumi jaotamisel, kui teksti pikkused varieeruvad. Kui teil on kolm veergu tooteomaduste jaoks ja ühe omaduse kirjeldus on konkreetses keeles eriti pikk, tagab fr-ühik, et kõik veerud jagavad sujuvalt olemasolevat laiust ilma paigutust lõhkumata või kärpimist sundimata, säilitades loetavuse kõigis lokaatides.

              .feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Iga omadus saab võrdse osa ruumist */
    gap: 15px;
  }
  
  /* Kui omaduse kirjeldus saksa keeles on palju pikem kui inglise keeles, */
  /* tagavad 1fr ühikud, et veerud kohanduvad sujuvalt. */
              
  
                
                  Copy
                
              
            

• Paremal-vasakule (RTL) keeled: Kuigi CSS Grid'i radade suuruse omadused on suures osas suunast sõltumatud (kuna `start` ja `end` on loogilised omadused), tuleb arvestada selgesõnalise suuruse määramise visuaalse efektiga. Näiteks 200px fikseeritud laiusega külgriba vasakul LTR-is jääb 200px laiuseks vasakul (või `inline-start`) ka RTL-is. Siiski kohanduvad radade sees olev sisu min-content ja max-content loomulikult tekstivooluga, muutes Grid'i suurepäraseks valikuks rahvusvahelistamiseks, kui seda kombineerida sobivate HTML `dir` atribuutidega.

Parimad tavad globaalseks veebiarenduseks CSS Grid'iga

Radade suuruse valdamine on vaid üks osa erakordsete veebikogemuste loomisest. Et tagada, et teie Grid-paigutused on tõeliselt robustsed, skaleeritavad ja kaasavad globaalsele publikule, arvestage järgmiste parimate tavadega:

Jõudluse kaalutlused

Kuigi CSS Grid on brauserimootorite poolt väga optimeeritud, on siiski jõudlusega seotud kaalutlusi, eriti keeruliste paigutuste või suure hulga grid-elementide puhul:

• Tõhus CSS: Hoidke oma grid-definitsioonid puhtad ja lühikesed. Vältige liiga keerulisi pesastatud grid'e, kui see pole absoluutselt vajalik. Lihtsamate ülesannete jaoks piisab sageli ühest grid-kontekstist.

• Minimeerige paigutuse nihkeid: Veenduge, et teie grid'i struktuur on stabiilne. Selgesõnalise radade suuruse (või `minmax()` fikseeritud miinimumidega) kasutamine aitab vältida olulisi paigutuse nihkeid, mis on kahjulikud kasutajakogemusele ja veebi elutähtsatele näitajatele, eriti aeglasemates võrkudes või seadmetes, mis on levinud erinevates globaalsetes piirkondades.

• Loogilised omadused: Kasutage loogilisi omadusi nagu inline-start, block-end, margin-inline, padding-block, kus see on asjakohane. Kuigi need ei mõjuta otseselt radade suurust, edendavad need kohanduvama ja tulevikukindlama CSS-i kirjutamist, mis austab loomulikult erinevaid kirjutamisrežiime (LTR, RTL, vertikaalsed skriptid) ilma tülikate ülekirjutamisteta rahvusvahelistamiseks.

Ligipääsetavus (A11y)

Hästi struktureeritud grid peab olema ligipääsetav ka kõigile kasutajatele, sealhulgas neile, kes kasutavad abitehnoloogiaid nagu ekraanilugejad. Grid'i visuaalse ümberjärjestamise võimalused, kuigi võimsad, võivad mõnikord lahti siduda visuaalse järjekorra DOM-i (Document Object Model) järjekorrast, mida ekraanilugejad järgivad.

• Eelistage DOM-i järjekorda: Võimaluse korral korraldage oma HTML-lähtekood loogilises lugemisjärjekorras. Kasutage Grid'i visuaalseks esitluseks, kuid veenduge, et aluseks olev semantiline struktuur jääb sidusaks. See on kriitilise tähtsusega kasutajatele igast taustast, kes tuginevad abitehnoloogiatele teie sisu navigeerimiseks.

• Kasutage selguse huvides grid-template-areas: Kasutades grid-template-areas, võivad semantilised nimed (nt "header", "nav", "main", "footer") muuta teie paigutuse arenduse ajal arusaadavamaks ja aidata kaasa paremini organiseeritud HTML-ile, kui te need intuitiivselt kaardistate. Kuigi grid-template-areas ei mõjuta DOM-i järjekorda, soodustab see tahtlikumat paigutuse disaini, mis sageli ühtib loogilise sisuvooluga.

• Testige abitehnoloogiatega: Testige oma grid-paigutusi alati ekraanilugejatega (nt NVDA, JAWS, VoiceOver), et tagada sisu esitamine tähenduslikus ja navigeeritavas järjekorras, olenemata visuaalsest ümberjärjestamisest. See on vältimatu samm tõeliselt kaasavate globaalsete veebikogemuste loomisel.

Hooldatavus ja skaleeritavus

Kui teie projektid kasvavad ja arenevad, muutub hästi organiseeritud ja hooldatav CSS esmatähtsaks. See kehtib eriti koostöökeskkondades, kus on arendajaid erineva keelelise ja haridusliku taustaga.

• Nimetage grid'i jooni ja alasid: Kasutage kohandatud nimesid grid'i joonte (nt `grid-template-columns: [main-start] 1fr [main-end];`) ja alade (grid-template-areas kaudu) jaoks. See parandab loetavust ja muudab meeskonnaliikmetele paigutuse kavatsuse mõistmise lihtsamaks, ilma et peaks numbrilisi joonte positsioone meelde jätma. Selged nimetamiskonventsioonid on universaalselt kasulikud.

• CSS-i kohandatud omadused (muutujad): Kasutage CSS-i kohandatud omadusi (--variable-name) levinud radade suuruste, vahede või murdepunktide defineerimiseks. See tsentraliseerib disainiotsused, muudab muudatuste tegemise lihtsamaks ja edendab järjepidevust keerulistes paigutustes. Näiteks defineerige --spacing-unit, mida kõik vahed järgivad.

              :root {
    --grid-gap: 20px;
    --sidebar-width: 280px;
  }
  
  .page-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--grid-gap);
  }
              
  
                
                  Copy
                
              
            

• Jaotage keerulised grid'id osadeks: Väga keerukate disainide puhul kaaluge pesastatud grid'ide või alamgrid'ide (subgrid) kasutamist (kui need on laialdaselt toetatud), et hallata keerukust. Alamgrid võimaldab grid-elemendil pärida oma vanema grid'i raja definitsioonid, pakkudes väga peent kontrolli suurema grid-konteksti sees.

Brauseritevaheline ühilduvus ja tagavaralahendused

Kuigi CSS Grid'il on suurepärane tugi kaasaegsetes brauserites üle maailma, on selle ühilduvuse mõistmine ja tagavaralahenduste või progressiivsete täiustuste pakkumine endiselt vastutustundlik arenduspraktika.

• Kaasaegsete brauserite tugi: CSS Grid on laialdaselt toetatud kõigis suuremates igihaljastes brauserites (Chrome, Firefox, Safari, Edge) ja on seda olnud juba mitu aastat. Enamiku uute projektide puhul, mis on suunatud kaasaegsetele veebikasutajatele, on ulatuslikud tagavaralahendused sageli ebavajalikud.

• @supports-reegel: Keskkondades, mis võivad sisaldada vanemaid brausereid, kasutage @supports CSS-i at-reeglit, et rakendada Grid-stiile ainult siis, kui brauser neid toetab. See võimaldab teil pakkuda lihtsamat (nt Flexbox või isegi plokktaseme) paigutust tagavaralahendusena mittetoetavatele brauseritele, tagades sujuva degradeerumise, mitte katkise kogemuse.

              .container {
    /* Tagavarastiilid (nt display: flex või lihtne plokk-paigutus) */
    display: flex;
    flex-wrap: wrap;
  }
  
  @supports (display: grid) {
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      /* Grid-spetsiifilised stiilid */
    }
  }
              
  
                
                  Copy
                
              
            

  See lähenemine tagab, et teie sisu on alati ligipääsetav, isegi kui keerukas grid-paigutus pole vanemates brauserites täielikult renderdatud. See austab kasutajate mitmekesiseid tehnoloogiamaastikke üle maailma.

Kokkuvõte

CSS Grid'i radade suuruse määramine on võimsate, paindlike ja kohanduvate veebipaigutuste aluskivi. Mõistes ja tõhusalt kasutades ühikuid nagu fr, auto, min-content, max-content ja transformatiivset minmax() funktsiooni koos dünaamilise kordamisega repeat(auto-fit/auto-fill, ...) kaudu, saate oma disainide üle enneolematu kontrolli.

Need täiustatud tehnikad annavad arendajatele võimu luua väga reageerivaid kasutajaliideseid, mis kohanduvad sujuvalt hulga ekraanisuuruste, sisupikkuste ja isegi rahvusvahelistamise nõuetega, säilitades samal ajal selguse ja jõudluse. Alates keerukatest armatuurlaua paigutustest kuni kohanduvate e-kaubanduse toote-grid'ideni avab radade suuruse valdamine veebidisaini jaoks uue võimaluste maailma.

Võtke omaks CSS Grid'i radade suuruse määramise võimsus. Katsetage nende omadustega, kombineerige neid uudsetel viisidel ja jälgige, kuidas teie paigutused muutuvad robustsemaks ja vastupidavamaks. Alustage nende täiustatud tehnikate integreerimist oma projektidesse juba täna, et ehitada tõeliselt silmapaistvaid ja globaalselt ligipääsetavaid veebikogemusi, mis peavad vastu ajaproovile ja kohanevad mis tahes väljakutsega, mida digitaalmaailm nende teele heidab.